<template>
  <div class="app-button">
    <el-button :type="type">
      <slot></slot>
    </el-button>
  </div>
</template>

<script>
export default {
  name: 'IboButton',
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
};
</script>

<style  lang="scss" scoped>
@import "@/assets/style/base/color-variables.scss";
.app-button {
  // 灰色
  .el-button--gray {
    background: $gray;
    color: $white;
    border-color: $gray;
  }
  .el-button--gray:hover {
    background: $dark-gray;
    border-color: $dark-gray;
  }
  .el-button--light-gray {
    background: $light-gray;
    color: $gray;
    border-color: $light-gray;
  }
  .el-button--light-gray:hover {
    background: $gray;
    color: $white;
    border-color: $gray;
  }
  // 蓝色 blue
  .el-button--blue {
    background: $blue;
    color: $white;
    border-color: $blue;
  }
  .el-button--blue:hover {
    background: $dark-blue;
    border-color: $dark-blue;
  }
  .el-button--light-blue {
    background: $light-blue;
    color: $blue;
    border-color: $light-blue;
  }
  .el-button--light-blue:hover {
    background: $blue;
    color: $white;
    border-color: $blue;
  }

  // 黄色 yellow
  .el-button--yellow {
    background: $yellow;
    color: $white;
    border-color: $yellow;
  }
  .el-button--yellow:hover {
    background: $dark-yellow;
    border-color: $dark-yellow;
  }
  .el-button--light-yellow {
    background: $light-yellow;
    color: $yellow;
    border-color: $light-yellow;
  }
  .el-button--light-yellow:hover {
    background: $yellow;
    color: $white;
    border-color: $yellow;
  }

  // 粉色 pink
  .el-button--pink {
    background: $pink;
    color: $white;
    border-color: $pink;
  }
  .el-button--pink:hover {
    background: $dark-pink;
    border-color: $dark-pink;
  }
  .el-button--light-pink {
    background: $light-pink;
    color: $pink;
    border-color: $light-pink;
  }
  .el-button--light-pink:hover {
    background: $pink;
    color: $white;
    border-color: $pink;
  }
  // 绿色 green
  .el-button--green {
    background: $green;
    color: $white;
    border-color: $green;
  }
  .el-button--green:hover {
    background: $dark-green;
    border-color: $dark-green;
  }
  .el-button--light-green {
    background: $light-green;
    color: $green;
    border-color: $light-green;
  }
  .el-button--light-green:hover {
    background: $green;
    color: $white;
    border-color: $green;
  }

  // 橙色 orange
  .el-button--orange {
    background: $orange;
    color: $white;
    border-color: $orange;
  }
  .el-button--orange:hover {
    background: $dark-orange;
    border-color: $dark-orange;
  }
  .el-button--light-orange {
    background: $light-orange;
    color: $orange;
    border-color: $light-orange;
  }
  .el-button--light-orange:hover {
    background: $orange;
    color: $white;
    border-color: $orange;
  }
}
</style>
